<template>
  <div class="box_yj" ref="parent" :style="chartsDom">
    <span></span>

    <div class="sq-title">智慧社区人口分布</div>
    <!-- <el-radio-group v-model="radio" size="medium" class="radio-group" @change="handleChange">
      <el-radio-button label="温江"></el-radio-button>
      <el-radio-button label="成都"></el-radio-button>
      <el-radio-button label="四川"></el-radio-button>
      <el-radio-button label="中国"></el-radio-button>
      <el-radio-button label="全球"></el-radio-button>
    </el-radio-group> -->
    <!-- <img src="@/assets/wj.jpg" class="ditu" style="z-index:100;" alt=""> -->
    <div id="charts" ref="charts" :style="chartsDom" v-show="jz">
           
      
    </div>
      <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { get_TalentIn_TalentSourceDistribution } from '@/api/data'
import 'echarts/extension/bmap/bmap'
import "echarts/map/js/china.js";
// import { MP } from '@/assets/js/bmap'
// import worldMap from 'echarts/map/json/world'
// import chinaMap from 'echarts/map/json/china'
// import sichuanMap from 'echarts/map/json/province/sichuan'
// import chengduMap from './mapJson/chengdu'
import wenjiangMap from './mapJson/wenjiang'
let chartsInit = null;
export default {
  data() {
    return {
      chartsDom: {},
      radio: '中国',
      jz:true,
      listMap:[
        {
          name:'寿安',
          value:20,
          lal:'103.729671,30.818696'
        },
        {
          name:'万春',
          value:20,
          lal:'103.814913,30.745976'
        },
        {
          name:'金马',
          value:20,
          lal:'103.820417,30.634037'
        },
        {
          name:'和盛',
          value:20,
          lal:'103.772475,30.724908'
        },
        {
          name:'涌泉',
          value:20,
          lal:'103.887166,30.674027'
        },
        {
          name:'公平',
          value:20,
          lal:'103.887166,30.704027'
        },
        {
          name:'柳城',
          value:20,
          lal:'103.833694,30.694563'
        },
        {
          name:'永宁',
          value:20,
          lal:'103.910423,30.730544'
        },
        {
          name:'天府',
          value:20,
          lal:'103.801352,30.673225'
        },
      ]
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    },
    // mapJson() {
    //   switch(this.radio) {
    //     case '温江':
    //     return wenjiangMap;
    //     case '成都':
    //     return chengduMap;
    //     case '四川':
    //     return sichuanMap;
    //     case '中国':
    //     return chinaMap;
    //     case '全球':
    //     return worldMap;
    //   }
    // }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      // MP('WwaKthc9GOHU1djrH1TGmrGePOvgMjl0').then(BMap => {
      //   // const map = new BMap.Map("charts");
      //   // console.log(map)
      //   // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        
      // })
      this.init();
      
    })
    
  },
  watch: {
    // radio(val) {
    //   this.$nextTick(_=>{
    //     this.init();
    //   });
    // }
  },
  methods: {
    handleChange() {
      this.$nextTick(_=>{
        this.init();
      });
    },
    init() {
      
      let range = 19;
      // switch(this.radio){
      //   case '温江':
      //     range = 19;
      //     break;
      //   case '成都':
      //     range = 20;
      //     break;
      //   case '四川':
      //     range = 21;
      //     break;
      //   case '中国':
      //     range = 22;
      //     break;
      //   case '全球':
      //     range = 23;
      //   break;
      //   default:
      //     break;
      // }
      let params = {
        range,
        date: this.dateProp.date
      }
      this.jz=false
      get_TalentIn_TalentSourceDistribution(params)
      .then(res=>{
        this.jz=true
        let dataa={}
        dataa.data=this.listMap
         this.chartInit(dataa,res.data);
      })
    },
    chartInit(dataa,mapJson) {
      console.log(mapJson)
      this.$echarts.registerMap('mapStr', wenjiangMap, {
          Alaska: {              // 把阿拉斯加移到美国主大陆左下方
              left: -131,
              top: 25,
              width: 15
          },
          Hawaii: {
              left: -110,        // 夏威夷
              top: 28,
              width: 5
          },
          'Puerto Rico': {       // 波多黎各
              left: -76,
              top: 26,
              width: 2
          }
      });
      let data = []
	  var max = 0;
	  for(var i=0;i<mapJson.data.length;i++){
	  		  if (max < mapJson.data[i].value){
	  			  max = mapJson.data[i].value;
	  		  }
	  }
	  var temp = (max+'').substring(0, 1);
	  var headNum = Number(temp)+1;
	  for(var i=0;i<(max+'').length-1;i++){
	  		  max = headNum*10;
	  }
      if(mapJson.data.length > 0){
        data = mapJson.data;
      }

      let option = {
            tooltip: {
                trigger: 'item',
                formatter(param){
                  return param.data.name + ': '+param.data.value[param.data.value.length-1]
                }
            },
            
            legend: {
                orient: 'vertical',
                top: 'bottom',
                left: '80%',
                data:['人口分布'],
                textStyle: {
                    color: '#fff'
                }
            },
            visualMap: {
                min: 0,
                max: max,
                splitNumber: 10,
                backgroundColor:'transparent', //标题背景色
                // backgroundColor : 'rgba(0,0,0,0)',
                color: ['#f00','#00FF00'],
                textStyle: {
                    color: '#fff'
                },
                  // range:[15, 40],
                
            },
            geo: {
                map: 'mapStr',
                aspectScale:2,
                label: {
                    emphasis: {
                        show: false,
                    }
                },
                regions: [      //对不同的区块进行着色
                {
                  name: '柳城街道', //区块名称
                  itemStyle: {
                      normal: {
                          areaColor: 'rgba(85,60,238,0.5)'
                      }
                  }
                },{
                  name: '公平街道', //区块名称
                  itemStyle: {
                      normal: {
                          areaColor: 'rgba(230,0,0,0.5)'
                      }
                  }
                },{
                  name: '涌泉街道', //区块名称
                  itemStyle: {
                      normal: {
                          areaColor: 'rgba(250,175,104,0.5)'
                      }
                  }
                },{
                  name: '天府街道', //区块名称
                  itemStyle: {
                      normal: {
                          areaColor: 'rgba(157,180,150,0.5)'
                      }
                  }
                },{
                  name: '和盛镇', //区块名称
                  itemStyle: {
                      normal: {
                          areaColor: 'rgba(31,120,180,0.5)'
                      }
                  }
                },{
                  name: '金马镇', //区块名称
                  itemStyle: {
                      normal: {
                          areaColor: 'rgba(238,210,238,0.5)'
                      }
                  }
                },{
                  name: '永宁镇', //区块名称
                  itemStyle: {
                      normal: {
                          areaColor: 'rgba(15,211,104,0.5)'
                      }
                  }
                },{
                  name: '万春镇', //区块名称
                  itemStyle: {
                      normal: {
                          areaColor: 'rgba(69,175,104,0.5)'
                      }
                  }
                },{
                  name: '寿安镇', //区块名称
                  itemStyle: {
                      normal: {
                          areaColor: 'rgba(85,60,238,0.5)'
                      }
                  }
                }],
                itemStyle: {
                    normal: {
                        areaColor: '#143470',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#152b5e'
                    }
                }
            },
            
            series: [
                {
                    name: '人口分布',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: this.convertData(dataa.data,mapJson.data),
                    symbolSize: 12,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            borderColor: '#fff',
                            borderWidth: 1
                        }
                    }
                }
            ]
        };
        // console.log(chartsInit);
      chartsInit && chartsInit.clear();
      chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
      chartsInit.dispatchAction({
          type: 'showTip',
          seriesIndex:0,  // 显示第几个series
          dataIndex: 1 // 显示第几个数据
      });
    },
    convertData(data,mapJson) {
      console.log(data,mapJson)
      var ress = [];
      var res=[]
      data.map(v=>{
        mapJson.map(z=>{
          if(v.name==z.name){
            ress.push({name:v.name,value:z.value,lal:v.lal})
          }
        })
      })
      console.log(1,ress)
      ress.map((item,i)=>{
        res.push({
          name: item.name,
          value: item.lal.split(',').concat(item.value)
        });
      })
      console.log(2,res)
      // var res = [];
      // for (var i = 0; i < data.length; i++) {
      //     var geoCoord = geoCoordMap[data[i].name];
      //     if (geoCoord) {
      //         res.push({
      //             name: data[i].name,
      //             value: geoCoord.concat(data[i].value)
      //         });
      //     }
      // }
      // console.log(res)
      return res;
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px
    position relative
  .ditu
    position: absolute;
    width: 76%;
    height: 73%;
    top: 16%;
    left: 12%;
  .radio-group
    position absolute
    left 30px
    top 65px
    z-index 1000
    >>> .el-radio-button.is-active .el-radio-button__inner
      background-color #037880
      color #ffffff
      box-shadow -1px 0 0 #037880
    >>> .el-radio-button__inner
      background-color transparent
      color #35ced8
      border 1px solid #037880
</style>